@function px2rem($px) {
  $rem: 54px;
  @return ($px/$rem)+rem;
}

$max-width: px2rem(540px);
$background-color: #101010;
$black-background: #000000;
$text-color: #ADADAD;
$title-color: #FFFFFF;
$detail-text-color: #E1E1E1;
$hover-color: #FFFFFF;
$hover-background-color: #82308E;
* {
  box-sizing: border-box;
  user-select: none;
  transition: color .4s, background-color .4s;
}

@font-face {
  font-family: 'iconfont';
  /* project id 803090 */
  src: url('//at.alicdn.com/t/font_803090_mjmkeniump.eot');
  src: url('//at.alicdn.com/t/font_803090_mjmkeniump.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_803090_mjmkeniump.woff') format('woff'), url('//at.alicdn.com/t/font_803090_mjmkeniump.ttf') format('truetype'), url('//at.alicdn.com/t/font_803090_mjmkeniump.svg#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

img {
  vertical-align: top;
}

a {
  color: $text-color;
  text-decoration: none;
}

html,
body {
  height: 100%;
  background-color: $background-color;
}

html {
  font-size: 54px;
}

body {
  position: relative;
  width: px2rem(540px);
  margin: 0 auto;
  padding: 0;
  overflow-y: auto;
  color: $text-color;
  font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}

.detect-wrap {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background-color: $black-background;
  .detect {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: px2rem(20px);
  }
}

.wechat-wrap {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  background-color: rgba(0, 0, 0, .8);
  .wechat {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    .item {
      background-color: #000000;
      box-shadow: 0px 0px px2rem(14px) px2rem(5px) rgba(0, 0, 0, 0.5);
      &:not(:last-child) {
        margin-right: px2rem(41px);
      }
      .image {
        overflow: hidden;
        border-radius: px2rem(2px);
        width: px2rem(200px);
        height: px2rem(200px);
        img {
          width: 100%;
          vertical-align: bottom;
        }
      }
      .text {
        position: relative;
        height: px2rem(40px);
        font-size: px2rem(15px);
        text-align: center;
        line-height: px2rem(38px);
        &:after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: px2rem(2px);
          background: radial-gradient(circle, #673A86, #000000);
        }
      }
    }
  }
}

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  padding-left: px2rem(16px);
  width: 100%;
  height: px2rem(73px);
  z-index: 100;
  background-color: $black-background;
  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: px2rem(2px);
    background: linear-gradient(to right, #673A86, #000000);
  }
  img {
    width: px2rem(244px);
  }
  .top-bar-btn {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 0 px2rem(21px);
    height: px2rem(71px);
    i {
      font-size: px2rem(40px);
      color: $detail-text-color;
    }
  }
}

.sidebar {
  position: fixed;
  top: 0;
  right: px2rem(-150px);
  padding-top: px2rem(73px);
  width: px2rem(150px);
  height: 100%;
  font-size: px2rem(18px);
  z-index: 90;
  background-color: $black-background;
  .nav {
    li {
      margin-top: px2rem(20px);
      a {
        display: block;
        width: 100%;
        height: px2rem(50px);
        padding-right: px2rem(21px);
        text-align: right;
        line-height: px2rem(50px);
      }
      &:first-child {
        margin-top: px2rem(10px);
      }
      &.active {
        background-color: $hover-background-color;
        a {
          color: $title-color;
        }
      }
    }
  }
  .sibar-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-right: px2rem(21px);
    padding-bottom: px2rem(80px);
    text-align: right;
    .lang-list {
      li {
        a {
          color: #6A6A6A;
        }
        &:not(:last-child) {
          padding-bottom: px2rem(21px);
        }
      }
      .active {
        a {
          color: $detail-text-color;
        }
      }
    }
    .hr {
      margin: px2rem(21px) 0 px2rem(21px) px2rem(21px);
      height: px2rem(1px);
      background: url('img/nav-dashed.png') repeat-x;
    }
    .contact-icon {
      display: flex;
      justify-content: flex-end;
      .icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: px2rem(40px);
        height: px2rem(40px);
        border-radius: px2rem(2px);
        color: $hover-color;
        background-color: $hover-background-color;
        &:not(:last-child) {
          margin-right: px2rem(11px);
        }
        i {
          font-size: px2rem(30px);
        }
      }
    }
  }
}

.section-home {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: px2rem(20px);
  font-size: px2rem(20px);
  background: url('img/index-bg.png') no-repeat center center;
  background-size: cover;
  img {
    width: px2rem(260px);
  }
}

.section-news {
  margin-bottom: px2rem(72px);
  .el-pagination {
    padding: px2rem(14px);
    font-size: 0;
    text-align: center;
    ul {
      li {
        width: px2rem(34px);
        height: px2rem(34px);
        margin: 0 px2rem(5px);
        font-size: px2rem(14px);
        line-height: px2rem(34px);
        font-weight: 400;
        color: $text-color !important;
        background-color: transparent !important;
        &:hover,
        &.active {
          color: $hover-color !important;
          background-color: $hover-background-color !important;
        }
      }
    }
  }
  .news-list {
    padding: 0 px2rem(34px);
    .item {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 px2rem(18px);
      font-size: px2rem(18px);
      line-height: 1.5;
      background-color: #1A1A1A;
      .date {
        line-height: 2;
        i {
          position: relative;
          margin-right: px2rem(2px);
          left: px2rem(-3px);
          font-size: px2rem(16px);
          color: $detail-text-color;
        }
      }
      .title {
        display: -webkit-box;
        overflow: hidden;
        color: $detail-text-color;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      &:not(:first-child) {
        &:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: px2rem(2px);
          background: linear-gradient(to right, #673A86, #101010);
        }
      }
    }
    li {
      height: px2rem(110px);
      &:not(:first-child) {
        height: px2rem(112px);
      }
    }
  }
}

.section-works {
  margin-bottom: px2rem(72px);
  .lignbox {
    position: relative;
    .swiper-container {
      .swiper-slide {
        min-height: px2rem(600px);
        background-color: $black-background;
        .image-area {
          height: px2rem(304px);
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
        }
        .intro-area {
          padding: 0 px2rem(20px) px2rem(35px) px2rem(20px);
          width: px2rem(430px);
          margin: auto;
          .title {
            position: relative;
            height: px2rem(38px);
            margin-top: px2rem(18px);
            font-size: px2rem(22px);
            color: $title-color;
            line-height: px2rem(38px);
            background: linear-gradient(to right, #000000, #673A86);
            &:after {
              content: '';
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: px2rem(2px);
              background: linear-gradient(to right, #673A86, #272727);
            }
          }
          .detail {
            margin-top: px2rem(6px);
            line-height: 1.5;
            a {
              color: #9052d3;
            }
          }
          font-size: px2rem(15px);
        }
      }
    }
    .prev-btn,
    .next-btn {
      position: absolute;
      top: px2rem(133px);
      font-size: px2rem(38px);
      color: #E1E1E1;
      opacity: 0.6;
      z-index: 10;
    }
    .prev-btn {
      left: 0;
      padding-left: px2rem(25px);
    }
    .next-btn {
      right: 0;
      padding-right: px2rem(25px);
    }
  }
}

.section-about-company {
  margin-bottom: px2rem(72px);
  .lignbox {
    position: relative;
    .swiper-container {
      .swiper-slide {
        .content {
          position: relative;
          margin: auto;
          width: px2rem(496px);
          .image-area {
            height: px2rem(280px);
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
          }
          .title-area {
            height: px2rem(40px);
            font-size: px2rem(15px);
            text-align: center;
            color: $detail-text-color;
            line-height: px2rem(40px);
            background-color: $black-background;
          }
          &:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: px2rem(2px);
            background: radial-gradient(circle, #673A86, #101010);
          }
        }
      }
    }
    .prev-btn,
    .next-btn {
      position: absolute;
      top: px2rem(133px);
      width: px2rem(45px);
      height: px2rem(45px);
      font-size: px2rem(20px);
      text-align: center;
      line-height: px2rem(45px);
      color: $hover-color;
      background-color: $hover-background-color;
      z-index: 10;
    }
    .prev-btn {
      left: 0;
      border-top-right-radius: px2rem(4px);
      border-bottom-right-radius: px2rem(4px);
    }
    .next-btn {
      right: 0;
      border-top-left-radius: px2rem(4px);
      border-bottom-left-radius: px2rem(4px);
    }
  }
  .text-wrap {
    margin: px2rem(16px) px2rem(20px);
    padding: 0 px2rem(2px);
    background: linear-gradient(to bottom, #673A86, #000000);
    .text-black {
      position: relative;
      padding: px2rem(35px) 0 px2rem(21px) 0;
      background-color: $black-background;
      .text {
        font-size: px2rem(17px);
        width: px2rem(430px);
        margin: auto;
        line-height: 2;
      }
      &:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: px2rem(2px);
        background: radial-gradient(circle, #101010, #673A86);
      }
    }
  }
}

.section-about-ceo {
  margin-bottom: px2rem(72px);
  .image {
    height: px2rem(419px);
    margin-top: px2rem(35px);
    background: url('img/about/ceo.jpg') no-repeat center center;
    background-size: cover;
  }
  .text-wrap {
    margin: 0 px2rem(20px) px2rem(16px) px2rem(20px);
    padding: 0 px2rem(2px);
    background: linear-gradient(to bottom, #673A86, #000000);
    .text-black {
      position: relative;
      padding: px2rem(35px) 0 px2rem(21px) 0;
      background-color: $black-background;
      .text {
        font-size: px2rem(17px);
        width: px2rem(430px);
        margin: auto;
        line-height: 2;
      }
      &:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: px2rem(2px);
        background: radial-gradient(circle, #101010, #673A86);
      }
    }
  }
}

.section-contact {
  display: flex;
  flex-direction: column;
  .info {
    .item {
      margin: px2rem(39px) 0 px2rem(42px) 0;
      .box {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        width: px2rem(72px);
        height: px2rem(72px);
        font-size: px2rem(20px);
        color: #FFFFFF;
        background-color: $hover-background-color;
        border-radius: px2rem(2px);
      }
      .icon {
        margin: -20px 0;
        text-align: center;
        font-size: px2rem(20px);
        color: $hover-color;
        .iconfont {
          font-size: px2rem(68px);
        }
      }
      .text-wrap {
        padding: 0 px2rem(54px);
        text-align: center;
        font-size: px2rem(16px);
        .text {
          display: inline-block;
          text-align: left;
          margin-top: px2rem(18px);
          p {
            margin: 0;
            line-height: 2;
          }
        }
      }
      .link-wrap {
        margin-top: px2rem(29px);
        text-align: center;
        .link {
          font-size: 0;
          a {
            display: inline-block;
            padding: px2rem(10px) px2rem(20px);
            font-size: px2rem(16px);
            color: $hover-color;
            background-color: $hover-background-color;
            border-radius: px2rem(2px);
            &:first-child {
              margin-right: px2rem(25px);
            }
          }
        }
      }
    }
  }
  .wechat {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: px2rem(22px) 0 px2rem(70px) 0;
    .item {
      background-color: #000000;
      box-shadow: 0px 0px px2rem(14px) px2rem(5px) rgba(0, 0, 0, 0.5);
      &:not(:last-child) {
        margin-right: px2rem(41px);
      }
      .image {
        overflow: hidden;
        border-radius: px2rem(2px);
        width: px2rem(200px);
        height: px2rem(200px);
        img {
          width: 100%;
          vertical-align: bottom;
        }
      }
      .text {
        position: relative;
        height: px2rem(40px);
        font-size: px2rem(15px);
        text-align: center;
        line-height: px2rem(38px);
        &:after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: px2rem(2px);
          background: radial-gradient(circle, #673A86, #000000);
        }
      }
    }
  }
  .footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: px2rem(220px);
    background-color: $black-background;
    .content-wrap {
      display: flex;
      .content {
        margin: auto;
        .logo {
          margin-bottom: px2rem(11px);
          img {
            width: px2rem(347px);
          }
        }
        .contact-icon {
          margin: 0 auto px2rem(21px) auto;
          overflow: hidden;
          .icon {
            display: flex;
            justify-content: center;
            align-items: center;
            float: left;
            width: px2rem(40px);
            height: px2rem(40px);
            margin-right: px2rem(21px);
            border-radius: px2rem(2px);
            color: $hover-color;
            background-color: $hover-background-color;
            i {
              font-size: px2rem(30px);
            }
          }
        }
        p {
          margin: 0;
          font-size: px2rem(16px);
          line-height: 2;
        }
      }
    }
  }
}

.section-title-wrap {
  padding: 0 px2rem(20px);
  .section-title {
    position: relative;
    height: px2rem(75px);
    font-size: px2rem(30px);
    text-align: center;
    white-space: nowrap;
    color: $hover-color;
    line-height: px2rem(104px);
    &:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: px2rem(2px);
      background: radial-gradient(circle, #673A86, #101010);
    }
  }
}

.pagging {
  width: px2rem(72px);
  height: px2rem(34px);
  margin: px2rem(14px) auto;
  font-size: px2rem(18px);
  text-align: center;
  line-height: px2rem(34px);
  color: $hover-color;
  background-color: $hover-background-color;
  border-radius: px2rem(4px);
}

.target-fix {
  position: relative;
  top: px2rem(-73px);
  display: block;
  height: 0;
  overflow: hidden;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fast-fade-enter-active,
.fast-fade-leave-active {
  transition: opacity .2s;
}

.fast-fade-enter,
.fast-fade-leave-to {
  opacity: 0;
}